<!--
 * @Author: 小花
 * @Date: 2022-05-24 22:49:39
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-28 19:09:39
 * @FilePath: /permission_client/src/layouts/LayoutView.vue
 * @Description: 布局页
-->
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu :default-active="currentRoute" class="el-menu-demo" mode="horizontal" background-color="#545c64"
          text-color="#fff" active-text-color="#ffd04b" router>
          <nav-menu :nav-menu="routes"></nav-menu>
          <el-menu-item class="execLogin" index="" @click="execLogin">
            <template #title>
              <font-awesome-icon icon="right-from-bracket" />退出登录
            </template>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
        <!-- <router-view></router-view> -->
      </el-main>
    </el-container>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, reactive, toRefs } from 'vue'
import NavMenu from '@/components/NavMenu.vue'
import LayoutView from '@/model/LayoutView'
import router from '@/router'
import { useStore } from '@/store'
import { logout } from '@/request'

export default defineComponent({
  name: 'LayoutView',
  components: {
    NavMenu
  },
  setup () {
    const store = useStore()
    const coreData = reactive(new LayoutView())

    coreData.routes = store.loginInfo.routes

    const currentRoute = computed(() => {
      return router.currentRoute.value.path
    })

    const execLogin = async () => {
      await logout()
      store.$reset()
      router.replace('/login')
    }

    return {
      ...toRefs(coreData),
      currentRoute,
      execLogin
    }
  }
})
</script>

<style lang='scss' scoped>
.execLogin {
  font-weight: bold;
  position: absolute;
  right: 0;
}

.el-main {
  position: relative;
}
</style>
